<template>
  <div>
    <van-nav-bar
      title="影院"
      ref="navbar"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #left>
        <div class="left">
          {{ $store.state.cityName }}
          <van-icon name="arrow-down" size="12" color="#000" />
        </div>
      </template>
      <template #right>
        <van-icon name="search" size="20" color="#000" />
      </template>
    </van-nav-bar>
    <cinema-list :height="myheight" :list="cinemaListState"></cinema-list>
    <div class="my">本人找工作+v：18803425419</div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import cinemaList from '@/components/cinemas/cinemaList.vue'
export default {
  computed: {
    // 引入状态
    ...mapState(['cinemaListState']),
    myheight () {
      return (
        document.documentElement.clientHeight -
        44 -
        document.querySelector('footer').offsetHeight +
        'px'
      )
    }
  },
  components: {
    cinemaList
  },
  methods: {
    // 引入清除模块
    ...mapMutations(['clearList']),
    onClickLeft () {
      this.clearList()
      this.$router.push('/city')
    },
    onClickRight () {
      this.$router.push('/cinema/search')
    }
  }
}
</script>

<style scoped lang='scss'>
.my {
  position: fixed;
  bottom: 44px;
  z-index: -1;
  width: 100%;
  height: 60px;
  text-align: center;
  line-height: 50px;
  color: #ddd;
  background: #fff;
}
</style>
